<template>
  <div class="">
    <slot v-if="success"
      ><SearchGroup
        ref="searchGroup"
        title="药品列表"
        :searchData="searchData"
        @searchFn="searchFn"
    /></slot>
    <div
      style="margin: 10px 15px 10px 0; display: flex; justify-content: flex-end"
    >
      <a-button type="primary" class="add-btn" @click="addDrug">
        <i class="icon-add"></i>
        新增药品说明书
      </a-button>
    </div>
    <div style="padding: 0 16px">
      <a-table
        :columns="columns"
        :rowKey="(r, i) => i"
        :data-source="exhibitData"
        :loading="loading"
        :pagination="{
          current: pageNum,
          pageSize: pageSize,
          total: total,
          position: 'bottom',
          pageSizeOptions: ['10', '15', '20', '25'],
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: tablePageChange,
          onShowSizeChange: tablePageChange,
        }"
        :scroll="{ x: 1200, y: 300 }"
      >
        <div slot="nameSlot" slot-scope="text">
          <a-tooltip placement="leftTop"
            ><template slot="title">{{ formatDataValue(text) }}</template>
            <span class="substr" style="display: block; width: 100%">{{
              formatDataValue(text)
            }}</span>
          </a-tooltip>
        </div>
        <div slot="imgSlot" slot-scope="url">
          <img
            class="drugImg"
            style="width: 50px; height: 50px"
            :src="url"
            alt=""
          />
        </div>
        <div slot="classifySlot" slot-scope="text">
          {{ text }}
        </div>
        <div slot="brandSlot" slot-scope="text">
          {{ text }}
        </div>
        <span slot="handler" slot-scope="text, record" class="handler">
          <a
            href="javascript:;"
            @click="
              () => {
                editDrug(record);
              }
            "
            >编辑</a
          >
          <a
            href="javascript:;"
            style="margin-left: 10px"
            @click="
              () => {
                showDetail(record);
              }
            "
            >详情</a
          >
          <a-popconfirm
            :title="deleteText(record)"
            cancelText="取消"
            okText="确定"
            @confirm="
              () => {
                delDrug(record);
              }
            "
          >
            <a-icon
              slot="icon"
              type="exclamation-circle"
              theme="filled"
              style="color: #ff0200"
            />
            <a
              href="javascript:;"
              style="margin-left: 10px"
              :class="record.status == 0 ? 'no-link' : 'delete'"
              >删除</a
            >
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <a-modal
      v-model="infoVisible"
      title="详情"
      cancel-text="取消"
      width="560px"
      :maskClosable="false"
      class="user-info-flag-style"
      @cancel="closeInfoModel"
      :bodyStyle="{
        height: 400 + 'px',
        'overflow-y': 'auto',
        'overflow-x': 'hidden',
      }"
    >
      <div class="clearfix">
        <div class="user-info-item clearfix">
          <p>
            <span class="tit">药品Id</span>
            <span class="cont substr">{{
              formatDataValue(currentItem.drugId)
            }}</span>
          </p>
          <p>
            <span class="tit">药品名称</span>
            <span class="cont substr">{{
              formatDataValue(currentItem.drugName)
            }}</span>
          </p>
        </div>
        <div class="user-info-item clearfix">
          <p>
            <span class="tit">药品图片</span>
            <img
              class="cont substr"
              style="width: 100px; height: 100px"
              :src="currentItem.drugImg"
            />
          </p>
          <p>
            <span class="tit">药品分类</span>
            <span class="cont substr">{{
              formatDataValue(currentItem.drugClassification)
            }}</span>
          </p>
        </div>

        <div class="user-info-item clearfix">
          <p>
            <span class="tit">药品品牌</span
            ><span class="cont">{{
              formatDataValue(currentItem.drugBrand)
            }}</span>
          </p>
          <p>
            <span class="tit">生产公司</span
            ><span class="cont">{{
              formatDataValue(currentItem.producer)
            }}</span>
          </p>
        </div>

        <div class="user-info-item clearfix">
          <p>
            <span class="tit">适应症</span>
            <a-tooltip placement="top">
              <template slot="title">{{
                formatDataValue(currentItem.indication)
              }}</template>
              <span class="cont substr">{{
                formatDataValue(currentItem.indication)
              }}</span>
            </a-tooltip>
          </p>
          <p>
            <span class="tit">用法用量</span>
            <a-tooltip placement="top">
              <template slot="title">{{
                formatDataValue(currentItem.usageMethod)
              }}</template>
              <span class="cont substr">{{
                formatDataValue(currentItem.usageMethod)
              }}</span>
            </a-tooltip>
          </p>
        </div>

        <div class="user-info-item clearfix">
          <p>
            <span class="tit">药理作用</span
            ><a-tooltip placement="top">
              <template slot="title">{{
                formatDataValue(currentItem.pharmacologicalEffect)
              }}</template>
              <span class="cont substr">{{
                formatDataValue(currentItem.pharmacologicalEffect)
              }}</span>
            </a-tooltip>
          </p>
          <p>
            <span class="tit">注意事项</span
            ><a-tooltip placement="top">
              <template slot="title">{{
                formatDataValue(currentItem.mattersNeedingAttention)
              }}</template>
              <span class="cont substr">{{
                formatDataValue(currentItem.mattersNeedingAttention)
              }}</span>
            </a-tooltip>
          </p>
        </div>

        <div class="user-info-item clearfix">
          <p>
            <span class="tit">成分</span
            ><a-tooltip placement="top">
              <template slot="title">{{
                formatDataValue(currentItem.composition)
              }}</template>
              <span class="cont substr">{{
                formatDataValue(currentItem.composition)
              }}</span>
            </a-tooltip>
          </p>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="editVisible"
      title="编辑"
      ok-text="确定"
      cancel-text="取消"
      width="576px"
      :maskClosable="false"
      @ok="editDrugModel"
      @cancel="closeEditModel"
      class="dict-list-model"
      :bodyStyle="{
        height: 400 + 'px',
        'overflow-y': 'auto',
        'overflow-x': 'hidden',
      }"
    >
      <a-form-model
        class="user-info-form"
        :model="currentItem"
        ref="editModel"
        :rules="drugInfoRules"
      >
        <a-form-model-item label="药品Id" prop="drugId">
          <a-input v-model="currentItem.drugId" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="药品名称" prop="drugName">
          <a-input v-model="currentItem.drugName"></a-input>
        </a-form-model-item>
        <a-form-item label="药品图片" prop="drugImg">
          <a-upload
            :file-list="fileList"
            name="file"
            action="http://localhost:8080/api/upload"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img
              style="width: 100%; height: 100%"
              :src="currentItem.drugImg"
              alt="avatar"
            />
          </a-upload>
        </a-form-item>
        <a-form-model-item label="药品分类" prop="drugClassification">
          <a-select v-model="currentItem.drugClassification">
            <a-select-option
              v-for="item in drugClassificationOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.value }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="药品品牌" prop="drugBrand">
          <a-select v-model="currentItem.drugBrand">
            <a-select-option
              v-for="item in drugBrandOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.value }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="生产公司" prop="producer">
          <a-input v-model="currentItem.producer"></a-input>
        </a-form-model-item>
        <a-form-model-item label="适应症" prop="indication">
          <a-textarea v-model="currentItem.indication" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="用法用量" prop="usageMethod">
          <a-textarea v-model="currentItem.usageMethod" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="药理作用" prop="pharmacologicalEffect">
          <a-textarea v-model="currentItem.pharmacologicalEffect" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="注意事项" prop="mattersNeedingAttention">
          <a-textarea
            v-model="currentItem.mattersNeedingAttention"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item label="成分" prop="composition">
          <a-textarea v-model="currentItem.composition" allow-clear />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="addVisible"
      title="新增"
      ok-text="保存"
      cancel-text="取消"
      width="576px"
      :maskClosable="false"
      @ok="addDrugModel"
      @cancel="closeAddModel"
      class="dict-list-model"
      :bodyStyle="{
        height: 400 + 'px',
        'overflow-y': 'auto',
        'overflow-x': 'hidden',
      }"
    >
      <a-form-model
        class="user-info-form"
        :model="addDrugItem"
        ref="addModel"
        :rules="drugInfoRules"
      >
        <!-- <a-form-model-item label="药品Id" prop="drugId">
          <a-input v-model="currentItem.drugId" disabled></a-input>
        </a-form-model-item> -->
        <a-form-model-item label="药品名称" prop="drugName">
          <a-input v-model="addDrugItem.drugName"></a-input>
        </a-form-model-item>
        <a-form-item label="药品图片" prop="drugImg">
          <a-upload
            :file-list="fileList"
            name="file"
            action="http://localhost:8080/api/upload"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img style="width: 100%; height: 100%" :src="imgSrc" alt="avatar" />
          </a-upload>
        </a-form-item>
        <a-form-model-item label="药品分类" prop="drugClassification">
          <a-select
            v-model="addDrugItem.drugClassification"
            placeholder="请选择药品分类"
          >
            <a-select-option
              v-for="item in drugClassificationOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.value }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="药品品牌" prop="drugBrand">
          <a-select v-model="addDrugItem.drugBrand">
            <a-select-option
              v-for="item in drugBrandOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.value }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="生产公司" prop="producer">
          <a-input v-model="addDrugItem.producer"></a-input>
        </a-form-model-item>
        <a-form-model-item label="适应症" prop="indication">
          <a-textarea v-model="addDrugItem.indication" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="用法用量" prop="usageMethod">
          <a-textarea v-model="addDrugItem.usageMethod" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="药理作用" prop="pharmacologicalEffect">
          <a-textarea v-model="addDrugItem.pharmacologicalEffect" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="注意事项" prop="mattersNeedingAttention">
          <a-textarea
            v-model="addDrugItem.mattersNeedingAttention"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item label="成分" prop="composition">
          <a-textarea v-model="addDrugItem.composition" allow-clear />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
F
<script>
import api from "@/api/drug";
import SearchGroup from "@/components/SearchGroup.vue";
import commonJS from "@/utils/commonJS";
import { message } from "ant-design-vue";
const searchData = [
  {
    type: "input",
    label: "药品名称",
    dataIndex: "drugName",
    option: {
      disabled: false,
      placeholder: "请输入药品名称",
      defaultValue: "",
    },
  },
  {
    type: "select",
    label: "药品类别",
    dataIndex: "drugClassification",
    option: {
      placeholder: "",
      defaultValue: "",
      optionList: [{ name: "全部", value: "" }],
    },
  },
  {
    type: "select",
    label: "药品品牌",
    dataIndex: "drugBrand",
    option: {
      placeholder: "",
      defaultValue: "",
      optionList: [{ name: "全部", value: "" }],
    },
  },
];

const columns = [
  {
    title: "药品Id",
    dataIndex: "drugId",
    width: "150px",
    align: "left",
  },
  {
    title: "药品名称",
    width: "200px",
    dataIndex: "drugName",
    align: "left",
    scopedSlots: { customRender: "nameSlot" },
  },
  {
    title: "药品图片",
    width: "130px",
    dataIndex: "drugImg",
    align: "left",
    scopedSlots: { customRender: "imgSlot" },
  },
  {
    title: "药品分类",
    width: "130px",
    dataIndex: "drugClassification",
    align: "left",
    scopedSlots: { customRender: "classifySlot" },
  },
  {
    title: "药品品牌",
    width: "130px",
    dataIndex: "drugBrand",
    align: "left",
    scopedSlots: { customRender: "brandSlot" },
  },
  {
    title: "生产公司",
    width: "250px",
    dataIndex: "producer",
    align: "left",
  },
  {
    title: "操作",
    dataIndex: "handler",
    align: "right",
    fixed: "right",
    scopedSlots: { customRender: "handler" },
  },
];
const drugInfoRules = {
  drugName: [{ required: true, message: "请输入药品名称" }],
  drugClassification: [
    { required: true, message: "请选择药品类型", trigger: "change" },
  ],
  drugBrand: [{ required: true, message: "请选择药品品牌", trigger: "change" }],
  // 采集文件名正则匹配
  producer: [{ required: true, message: "请输入生产公司" }],
  indication: [{ required: true, message: "请输入适应症" }],
  usageMethod: [{ required: true, message: "请输入用法用量" }],
  pharmacologicalEffect: [{ required: true, message: "请输药理作用" }],
  mattersNeedingAttention: [{ required: true, message: "请输入注意事项" }],
  composition: [{ required: true, message: "请输入成分" }],
};
const initModel = {
  drugId: "",
  drugName: "",
  drugImg: "",
  drugClassification: {},
  drugBrand: {},
  producer: "",
  indication: "",
  usageMethod: "",
  pharmacologicalEffect: "",
  mattersNeedingAttention: "",
  composition: "",
};
export default {
  name: "DrugView",
  props: {},
  data() {
    return {
      success: false,
      searchData,
      columns,
      searchCont: {},
      pageNum: 1,
      pageSize: 10,
      exhibitData: [],
      totalData: [],
      total: 0,
      loading: false,
      infoVisible: false,
      editVisible: false,
      currentItem: initModel,
      addVisible: false,
      addDrugItem: initModel,
      drugInfoRules,
      drugClassificationOptions: [],
      drugBrandOptions: [],
      fileList: [],
      imgLoading: false,
      imageURL: "",
      fileName: "",
      imgSrc: "http://localhost:8080/api/default_picture.png",
    };
  },
  components: {
    SearchGroup,
  },
  computed: {},
  watch: {
    fileName(name) {
      console.log("name", name);
      if (this.addVisible) {
        setTimeout(
          () => (this.imgSrc = `http://localhost:8080/api/${name}`),
          500
        );
      } else {
        setTimeout(
          () =>
            (this.currentItem.drugImg = `http://localhost:8080/api/${name}`),
          500
        );
      }
      console.log("imgSrc", this.imgSrc);
    },
  },
  methods: {
    handleChange(info) {
      console.log("info", info);
    },
    beforeUpload(file) {
      this.fileName = file.name;
      console.log("file", file);
    },

    // 改造searchData中的数据
    modifiedData(name, data) {
      let result = this.searchData.filter((item) => item.dataIndex == name);
      if (result.length > 0) {
        result[0].option.optionList = result[0].option.optionList.concat(data);
        console.log("8888881111", result[0].option.optionList);
      }
    },
    getDrugClassication() {
      api.classifyList().then((res) => {
        if (res.status == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.drugClassificationOptions[i] = {
              name: res.data[i],
              value: res.data[i],
            };
          }
          console.log("eeee", this.drugClassificationOptions);
          this.modifiedData(
            "drugClassification",
            this.drugClassificationOptions
          );
          this.addDrugItem.drugClassification =
            this.drugClassificationOptions[0].value;
        }
      });
    },
    getDrugBrand() {
      api.brandList().then((res) => {
        if (res.status == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.drugBrandOptions[i] = {
              name: res.data[i],
              value: res.data[i],
            };
          }
          this.modifiedData("drugBrand", this.drugBrandOptions);
          this.addDrugItem.drugBrand = this.drugBrandOptions[0].value;
          console.log("1======1", this.drugBrandOptions);
          this.success = true;
        }
      });
    },
    formatDataValue(txt) {
      return commonJS.formatDataValue(txt);
    },
    // 查找数据
    searchFn(val) {
      if (val) {
        this.searchCont = JSON.parse(JSON.stringify(val));
      } else {
        val = JSON.parse(JSON.stringify(this.searchCont));
      }
      console.log(88123123, JSON.stringify(val));
      this.loading = true;
      console.log("val", val);
      api.drugList(val).then((res) => {
        this.loading = false;
        if (res.status === 200) {
          console.log("fff", res);
          this.totalData = res.data;
          this.total = res.data.length;
          let pageSum = Math.ceil(this.total / this.pageSize);
          if (pageSum < this.pageNum) {
            this.pageNum = 1;
          }
          this.exhibitData = this.totalData.slice(
            (this.pageNum - 1) * this.pageSize,
            this.pageNum * this.pageSize
          );
          console.log("999", this.exhibitData);
        } else {
          this.totalData = [];
          this.total = 0;
        }
      });
    },
    // 表格页数改变
    tablePageChange(pageNum, pageSize) {
      this.pageNum = pageNum;
      this.pageSize = pageSize;
      this.exhibitData = this.totalData.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    },
    // 查看药品详情
    showDetail(record) {
      this.infoVisible = true;
      this.currentItem = record;
      console.log(this.currentItem);
    },
    // 关闭药品详情弹窗
    closeInfoModel() {
      console.log("关闭弹窗");
      this.infoVisible = false;
      this.currentItem = {};
    },
    // 新增药品弹窗
    addDrug() {
      this.addVisible = true;
      this.addDrugItem = initModel;
      console.log(this.addDrugItem);
    },
    addDrugModel() {
      this.$refs.addModel.validate((valid) => {
        if (valid) {
          this.addDrugItem[
            "drugImg"
          ] = `/${this.fileName}`;
          api.addDrug(this.addDrugItem).then((res) => {
            if (res.status == 200) {
              message.info("新增成功！");
              this.closeAddModel();
              this.searchFn();
            } else {
              message.info(res.message);
            }
          });
        }
      });
    },
    closeAddModel() {
      this.addVisible = false;
      this.addDrugItem = initModel;
    },
    // 编辑药品弹窗
    editDrug(record) {
      this.editVisible = true;
      this.currentItem = record;
      console.log(this.currentItem);
    },
    editDrugModel() {
      console.log('ppppppp')
      this.$refs.editModel.validate((valid) => {
        if (valid) {
          let params={
            ...this.currentItem,
            drugImg:this.currentItem.drugImg.slice(25)
          }
          api.editDrug(params).then((res) => {
            if (res.status == 200) {
              message.info("修改成功！");
              this.closeEditModel();
              this.searchFn();
            } else {
              message.info(res.message);
            }
          });
        }
      });
    },
    closeEditModel() {
      this.editVisible = false;
      this.currentItem = initModel;
    },
    deleteText(record) {
      let b = record.drugName;
      return "确定将" + '"' + b + '"' + "删除吗？";
    },
    // 删除药品
    delDrug(record) {
      const th = this;
      api
        .delDrug({
          drugId: record.drugId,
        })
        .then((res) => {
          // 提示操作结果
          if (res.status === 200) {
            message.success("删除成功");
            // 重取数据
            th.searchFn();
          } else {
            message.error(res.message);
          }
        });
    },
  },
  created() {},
  mounted() {
    this.getDrugClassication();
    this.getDrugBrand();
    this.searchFn();
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.user-info-flag-style {
  /deep/.ant-modal-header {
    padding: 13px 24px 13px 16px;
  }
  /deep/.ant-modal-close {
    top: -4px;
  }
  /deep/.ant-modal-body {
    padding: 16px;
  }
  /deep/.ant-modal-footer {
    display: none;
  }
  .user-info-item {
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    p {
      float: left;
      width: 500px;
      margin-right: 16px;
      &:last-child {
        margin-right: 0;
        width: 500px;
      }
    }
    .tit {
      display: block;
      float: left;
      width: 500px;
      opacity: 0.65;
      font-size: 14px;
      line-height: 20px;
      color: #1b1e22;
      letter-spacing: 0;
      font-weight: 400;
      //margin-right: 16px;
    }
    .cont {
      font-size: 14px;
      line-height: 20px;
      color: #1b1e22;
      letter-spacing: 0;
      font-weight: 400;
      width: 500px;
      display: block;
      float: left;
    }
  }
}
</style>
